Jak zrobić pokaz slajdów bez użycia PowerPointa? [CSS, JavaScript]

Przygotowanie prezentacji na jakieś publiczne wystąpienie wiąże się zwykle z dłubaniną w PowerPoincie (osoby wolące wolne oprogramowanie wybiorą pewnie OpenOffice Impress). Ale co, jeśli przyjdzie nam wyświetlać prezentację na komputerze, na którym nie ma tych programów? Znacznie większe możliwości w zakresie dostępności i interoperacyjności przyniesie wykonanie slajdów w XHTML-u. Dzięki stworzonym przez W3C skryptom możemy uzyskać wszystkie funkcjonalności prezentacji stworzonej za pomocą dedykowanych narzędzi.

HTML Slidy to elegancko napisany skrypt autorstwa Dave'a Raggetta z Konsorcjum WWW, który pozwala nam przekształcić pojedynczy dokument XHTML w prezentację kolejnych slajdów, wykorzystując jedynie dwa zewnętrzne pliki – kod JavaScriptu i definiujący wygląd prezentacji arkusz stylów.

Podstawowa konstrukcja nagłówka takiego dokumentu-prezentacji wygląda następująco:

<html xmlns="http://www.w3.org/1999/xhtml" 
 lang="en" xml:lang="en"> 
<head> 
 <title>Prezentacja slajdów</title> 
 <meta name="copyright" 
 content="informacje o prawach autorskich" /> 

 <!-- link do arkusza stylów --> 
 <link rel="stylesheet" type="text/css" media="screen, projection" 
 href="http://www.w3.org/Talks/Tools/Slidy/show.css" /> 
 
<!-- link do skryptu Slidy --> 

<script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js" 
 type="text/javascript"></script> 

<style type="text/css"> 
 </style> 

<!-- opcjonalnie: CSS do wydruku dokumentu --> 
 
 <link rel="stylesheet" type="text/css" media="print" 
 href="http://www.w3.org/Talks/Tools/Slidy/print.css" /> 
</head>

Oczywiście, jeśli nie mamy w miejscu prezentacji dostępu do Internetu, lepiej pobrać skrypt i pliki graficzne i umieścić je w katalogu z dokumentem prezentacji.

Z kolei element <body> musi być rozpoczęty przez kontener zawierający tło slajdu:

<!-- definicja tła --> 
<div class="background"> 
 <img id="head-icon" alt="graphic with four colored squares"
 src="http://www.w3.org/Talks/Tools/Slidy/icon-blue.png" align="left" /> 
 
<!-- logo w SVG, przestarzałe przeglądarki mogą załadować GIF-a --> 
<object id="head-logo" title="logo" type="image/svg+xml"
 data="http://www.w3.org/Talks/Tools/Slidy/w3c-logo.svg">
<img alt="logo" id="head-logo-fallback" src="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.gif" 
 align="right"/></object> 
</div>

Każdy ze slajdów jest zamykany w kontenerze <div> (klasa slide)
<div class="slide"> ... </div>

Można oczywiście przygotować specjalną stronę startową, wyglądającą odmiennie od pozostałych. Wystarczy aby dany kontener <div> był klasy slide cover.

<div class="slide cover"> 
 <img src="http://www.w3.org/Talks/Tools/Slidy/keys.jpg" 
 alt="strona startowa" class="cover" /> 
 <br clear="all" />            
 <h1>Strona startowa prezentacji</h1> 
 <p><a href="http://strona.pl">Strona.pl</a> 
 <a href="mailto:email@strona.pl">e-mail@strona.pl</a></p> 
</div>

«poprzednia 1 2 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

skomentuj »